<template> 
  <div class="goods">
    <van-swipe class="goods-swipe" :autoplay="3000">
      <van-swipe-item v-for="thumb in goods.thumb" :key="thumb">
        <img :src="thumb" height="180" />
      </van-swipe-item>
    </van-swipe>
  </div>
  <div class="container-box">
    <div class="container-item">
      <van-cell-group inset>
        <van-cell value="进入店铺" icon="shop-o" is-link @click="sorry('进入店铺~')">
          <template #title>
            <span class="van-cell-text">有赞的店</span>
            <van-tag class="goods-tag" type="danger">官方</van-tag>
          </template>
        </van-cell>
        <van-cell title="线下门店" icon="location-o" is-link @click="sorry('线下门店~')" />
        <van-cell title="会员中心" icon="user-o" is-link to="/detail" />
        
      </van-cell-group>
    </div> 
    <!-- <h1 v-text='num'></h1>
    <h1 v-text='usr.age'></h1>
    <button @click='change'>改变</button>
    <button @click='stopAll'>停止监听</button> -->
  </div> 
</template>

<script lang="ts" setup>
import { onMounted, reactive,computed,watch, ref,getCurrentInstance } from 'vue' 
import { useRoute } from 'vue-router' 
import { Toast } from 'vant'
import type { IGoods } from '@/types' 

const route = useRoute();
const { proxy }: any = getCurrentInstance();//关键代码
 
const goods = reactive<IGoods>({
  title: '美国伽力果（约680g/3个）',
  price: 2680,
  express: '免运费',
  remain: 19,
  thumb: [
    'https://img.yzcdn.cn/public_files/2017/10/24/e5a5a02309a41f9f5def56684808d9ae.jpeg',
    'https://img.yzcdn.cn/public_files/2017/10/24/1791ba14088f9c2be8c610d0a6cc0f93.jpeg'
  ]
})

  // watch监听ref变量、reactive变量的变化
  const num = ref(1)
  const usr = reactive({name:'张三',age:1})
  const change = () => {
    num.value++
    usr.age++
  }

  watch(route, (newRoute, oldRoute) => {
    console.log('new===route===', newRoute) 
    console.log('old===route====', oldRoute) 
    console.log('total', newRoute === oldRoute) // false
  })

onMounted(()=>{ 
  proxy.$modal.loading(); 
  setTimeout(() => {
    proxy.$modal.closeLoading();
  }, 1000); 
  var nowdate = Date();

  // proxy.testGlobal("测试"); 
  // proxy.testGlobal(nowdate); 

  // const nowdate2 =proxy.parseTime(nowdate); 
  // console.log('nowdate2===nowdate2====', nowdate2) 
 
  //proxy.$modal.confirm("测试");

  //getUser()
})

  // watch还可以监听计算属性的变化
  const total = computed(()=>num.value*100)

  const stop2 = watch(total, (newTotal, oldTotal) => {
    console.log('newTotal======', newTotal) 
    console.log('oldTotal=======', oldTotal) 
    console.log('total', newTotal === oldTotal) // false
  })

  // 停止watch监听
  const stopAll = () => {  stop2() }
    
  const sorry = (text: string = '暂无后续逻辑~') => {
    Toast(text)
  }
</script>

<style lang="scss">
.goods {
  padding-bottom: 10px;

  &-swipe {
    img {
      width: 100%;
      display: block;
    }
  } 
}
</style>
